<template>
  <view>
    <canvas canvas-id="poster" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
  </view>
</template>

<script>
import { pathToBase64, base64ToPath } from '../../js_sdk/image-tools/index.js'
export default {
	data() {
		return {
		  canvasW: 364,
      canvasH: 564,
      slogan: '北京时间26日晚，中国女排迎来了世界女排联赛的第二场比赛。经过三局比拼。北京时间26日晚，中国女排迎来了世界女排联赛的第二场比赛。经过三局比拼。',
      lines: 3,
    };
	},
	//第一次加载
	onLoad(e) {
	},
  created(){
    this.createPoster()
  },
	computed: {
	},
  onReady:  async function(e) {
    let context = uni.createCanvasContext('poster')
    // 当前Y值
    let currentY = 0;
    // 商品图
    const coverImage = new Image();
    coverImage.src = '/static/images/goods-share.png';
    // 二维码
    const qrCodeImage = new Image();
    qrCodeImage.src = '/static/images/qrcode-share.png';

    const {windowWidth, windowHeight} = await this.getSystemInfo();

    // 图片高 361
    let coverH = 361;
    // 二维码 70
    let qrcodeWH = 70
    // 边距 12
    let textML = 12
    // 文字 215
    let textLen = 215;
    // 图片与二维码距离 12
    let distanceHQ = 10;
    // 文字与二维码距离 22
    let distanceTQ = 12;

    // canvas 长宽
    this.canvasW = 332;
    this.canvasH = 454;
    // 背景色
    context.setFillStyle('#441ca1'); // 默认白色
    context.fillRect(0, 0, this.canvasW, 100) // fillRect(x,y,宽度，高度)
    context.drawImage(coverImage.src, 0, currentY, this.canvasW, coverH);
    console.log(currentY);
    currentY = coverH + distanceHQ;
    console.log(currentY);

    context.drawImage(
        qrCodeImage.src,
        0,
        0,
        qrCodeImage.width,
        qrCodeImage.height,
        this.canvasW - qrcodeWH - distanceTQ,
        currentY,
        qrcodeWH,
        qrcodeWH
    );
    // console.log('currentY到文字这里了', currentY, coverImage.height);

    // 3、绘制商品标题，多余文字自动换行
    context.setFontSize(13); // setFontSize() 设置字体字号
    context.setFillStyle('#333'); // setFillStyle() 设置字体颜色
    console.log(currentY);
    const {context:newContext, currentY: newCurrentY} = this.drawText(context, this.slogan, textML, currentY+12, textLen)
    context = newContext;
    currentY = newCurrentY;

    context.draw(false,(ret)=>{ // draw方法 把以上内容画到 canvas 中。
      console.log(ret)
      // uni.showToast({
      //   icon:'success',
      //   mask:true,
      //   title: '绘制完成',
      // });

      setTimeout(()=> {
        uni.canvasToTempFilePath({ // 保存canvas为图片
          canvasId: 'poster',
          quality: 1,
          destWidth: this.canvasW,
          destHeight: this.canvasH,
          complete: function(res) {
            // 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
            console.log('保存canvas为图片sss====>', res)

            // #ifndef H5
            // 需条件编译的代码
            base64ToPath(res.tempFilePath)
                .then(path => {
                  console.log('path========>', path)
                })
                .catch(error => {
                  console.log('error========>', error)
                })
            return;
            // #endif

            // #ifdef APP-PLUS
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function() {
                uni.showToast({
                  icon: 'none',
                  position: 'bottom',
                  title: "图片已下载至【图库】，请打开【图库】查看", // res.tempFilePath
                });
              }
            });
            // #endif
          } ,
        })
      }, 500)
    })
  },
  methods: {
    // 获取设备信息
    getSystemInfo(){
      return new Promise((req, rej) => {
        uni.getSystemInfo({
          success: function (res) {
            req(res)
          }
        });
      })
    },
    /**
     * 绘制文子
     * @param context
     * @param slogan  文字
     * @param currentX 起始位置X
     * @param currentY 起始位置Y
     * @param lineW 行宽
     * @param lines 限制行数
     * @constructor
     */
    drawText(context, slogan, currentX, currentY, lineW=300, lines=3){
      let cursor =  0; // 文字下标
      let textLineW = 0; // 一行中当前写入的位置
      let lineNum = 1; // 当前行数
      // let lineW = 300; // 行宽
      while (cursor < slogan.length){
        // 当前文字
        let text = slogan.substr(cursor, 1);
        // 当前文字宽度
        let textW = context.measureText(text).width;

        // 判断文字是否写满一行 否：继续写，是：换到下一行
        if (textLineW < lineW){
          // 判断是否限制了行数 超过显示省略号
          if (textLineW >= (lineW-30) && lines === lineNum){
            text += '...';
            cursor = 99999; // 设置跳出循环
          }
          context.fillText(text, textLineW + currentX, currentY);
        }else{
          lineNum++;
          currentY += 20;
          textLineW = 0;
          context.fillText(text, textLineW + currentX, currentY);
        }
        textLineW += textW
        cursor++;
      }

      return {context, currentY};
    },
    canvasIdErrorCallback: function (e) {
      console.error(e.detail.errMsg)
    },
    createPoster() {
      // const ctx = uni.createCanvasContext('poster');
      // ctx.setFillStyle('#d47777'); // 默认白色
      // ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)
      // ctx.draw();
    },
  }

};
</script>
